<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Other | Cursor Change</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <p>
      Here is a simple network with nodes and edges that demonstrates how to
      change the cursor on hover for nodes and edges.
    </p>
    <p>
      Use the dropdowns and button below to change the cursor type bound to an
      event.
    </p>
    <div>
      Event Type -
      <select id="eventType">
        <option value="hoverNode">hoverNode</option>
        <option value="blurNode">blurNode</option>
        <option value="hoverEdge">hoverEdge</option>
        <option value="blurEdge">blurEdge</option>
        <option value="dragStart">dragStart</option>
        <option value="dragging">dragging</option>
        <option value="dragEnd">dragEnd</option>
      </select>
      &nbsp; Cursor Type -
      <select id="cursorType">
        <option value="auto">auto</option>
        <option value="default">default</option>
        <option value="context-menu">context-menu</option>
        <option value="help">help</option>
        <option value="pointer">pointer</option>
        <option value="progress">progress</option>
        <option value="wait">wait</option>
        <option value="cell">cell</option>
        <option value="crosshair">crosshair</option>
        <option value="text">text</option>
        <option value="vertical-text">vertical-text</option>
        <option value="alias">alias</option>
        <option value="copy">copy</option>
        <option value="move">move</option>
        <option value="no-drop">no-drop</option>
        <option value="not-allowed">not-allowed</option>
        <option value="all-scroll">all-scroll</option>
        <option value="col-resize">col-resize</option>
        <option value="row-resize">row-resize</option>
        <option value="n-resize">n-resize</option>
        <option value="e-resize">e-resize</option>
        <option value="w-resize">w-resize</option>
        <option value="s-resize">s-resize</option>
        <option value="ne-resize">ne-resize</option>
        <option value="nw-resize">nw-resize</option>
        <option value="se-resize">se-resize</option>
        <option value="sw-resize">sw-resize</option>
        <option value="ew-resize">ew-resize</option>
        <option value="ns-resize">ns-resize</option>
        <option value="nesw-resize">nesw-resize</option>
        <option value="nwse-resize">nwse-resize</option>
        <option value="zoom-in">zoom-in</option>
        <option value="zoom-out">zoom-out</option>
        <option value="grab">grab</option>
        <option value="grabbing">grabbing</option>
      </select>
      &nbsp;

      <button
        onclick="changeEventCursor(document.getElementById('eventType').value,document.getElementById('cursorType').value);"
      >
        Change Cursor for Event
      </button>
    </div>
    <div id="mynetwork"></div>

    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = { interaction: { hover: true } };
      var network = new vis.Network(container, data, options);

      //Get the canvas HTML element
      var networkCanvas = document
        .getElementById("mynetwork")
        .getElementsByTagName("canvas")[0];
      function changeCursor(newCursorStyle) {
        networkCanvas.style.cursor = newCursorStyle;
      }
      function changeEventCursor(eventName, cursorType) {
        network.on(eventName, function () {
          changeCursor(cursorType);
        });
      }
      network.on("hoverNode", function () {
        changeCursor("grab");
      });
      network.on("blurNode", function () {
        changeCursor("default");
      });
      network.on("hoverEdge", function () {
        changeCursor("grab");
      });
      network.on("blurEdge", function () {
        changeCursor("default");
      });
      network.on("dragStart", function () {
        changeCursor("grabbing");
      });
      network.on("dragging", function () {
        changeCursor("grabbing");
      });
      network.on("dragEnd", function () {
        changeCursor("grab");
      });
    </script>
  </body>
</html>
